<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>{% block title %}{% endblock %}</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
  {% block cus_style %}{% endblock %}
  <style type="text/css">
      .namespace{
          margin-top: 10px;
          margin-right: 220px;
      }
      /*重写下拉框展示css*/
      .layui-input{
          color: #009f95;
          font-size: 18px;
          /*font-weight: bold;*/
          background: #eeeeee;
      }
      /*重写下拉框选中字体颜色*/
      .layui-form-select dl dd.layui-this {
            background-color: #009f95 !important;
            color: #fff
      }
      /*重写下拉框选项字体颜色*/
      .layui-bg-cyan {
            color: #a4a4a4 !important;
            font-size: 16px;
            background-color: #2F4056 !important
      }
      .layui-form-checked[lay-skin=primary] i {
            border-color: #009f95 !important;
            background-color: #009f95;
            color: #fff
      }
      /*重写table多行展示样式*/
      .layui-table-cell {
          height: inherit;
      }
      /*弹出框按钮*/
      .layui-layer-btn0 {
          background: #009f95 !important;
      }
      body {
          background: #eeeeee;
      }
  </style>
</head>
{% block layeropen %}{% endblock %}
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header layui-bg-cyan">
    <div class="layui-logo layui-hide-xs" style="font-size: 20px;font-weight: bold;color: #fff;background-color: #2F4056">
        Kubernetes管理平台
    </div>
     <!--头部区域（可配合layui 已有的水平导航）
        <div class="layui-form-item layui-layout-left" id="namespace">
          <div class="namespace">
              <select name="namespace">
                  <option value="clustername">default</option>
                  <option value="clustername1">k8s</option>
              </select>
          </div>
      </div>
-->

    <ul class="layui-layout-left layui-form">
       <div class="namespace  layui-form-item">
            <select name="namespace" id="nsSelect" lay-filter="nsSelect">
            </select>
       </div>
    </ul>


    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="/static/img/touxiang.jpg" class="layui-nav-img">
            <span style="font-family: 'DejaVu Sans'; font-size: 16px; font-style: normal">liangpp</span>
        </a>
        <dl class="layui-nav-child">
          <dd><a href="{% url 'logout' %}">Sign out</a></dd>
        </dl>
      </li>
        <!--
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
      -->
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll layui-bg-cyan">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test">
        <li class="layui-nav-item {% block nav-itemed-1 %}{% endblock %}"> {# 用来控制菜单选中 #}
          <a class="" href="{% url 'index' %}"><i class="layui-icon layui-icon-console">&nbsp;&nbsp;</i>仪表盘</a>
            <!--
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">menu 1</a></dd>
            <dd><a href="javascript:;">menu 2</a></dd>
            <dd><a href="javascript:;">menu 3</a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
          -->
        </li>
        <li class="layui-nav-item {% block nav-itemed-3 %}{% endblock %}">
            <a href="javascript:;"><i class="layui-icon layui-icon-component">&nbsp;&nbsp;</i>Kubernetes</a>
            <dl class="layui-nav-child">
                <dd><a href="{% url 'nodes' %}" class="{% block nav-itemed-3-1 %}{% endblock %}">&nbsp;&nbsp;&nbsp;&nbsp;Nodes</a></dd>
                <dd><a href="{% url 'namespaces' %}" class="{% block nav-itemed-3-2 %}{% endblock %}">&nbsp;&nbsp;&nbsp;&nbsp;Namespace</a></dd>
                <dd><a href="{% url 'pv' %}" class="{% block nav-itemed-3-3 %}{% endblock %}">&nbsp;&nbsp;&nbsp;&nbsp;Persistent Volume</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item {% block nav-itemed-2 %}{% endblock %}">
          <a href="javascript:;"><i class="layui-icon layui-icon-search">&nbsp;&nbsp;</i>工作负载</a>
          <dl class="layui-nav-child">
            <dd><a href="{% url 'deployment' %}" class="{% block nav-itemed-2-1 %}{% endblock %}">&nbsp;&nbsp;&nbsp;&nbsp;Deloyment</a></dd>
            <dd><a href="{% url 'statefulset' %}" class="{% block nav-itemed-2-2 %}{% endblock %}">&nbsp;&nbsp;&nbsp;&nbsp;StatefulSet</a></dd>
            <dd><a href="{% url 'daemonset' %}" class="{% block nav-itemed-2-3 %}{% endblock %}">&nbsp;&nbsp;&nbsp;&nbsp;DaemonSet</a></dd>
            <dd><a href="{% url 'pods' %}" class="{% block nav-itemed-2-4 %}{% endblock %}">&nbsp;&nbsp;&nbsp;&nbsp;Pods</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item {% block nav-itemed-4 %}{% endblock %}">
            <a href="javascript:;"><i class="layui-icon layui-icon-set">&nbsp;&nbsp;</i>负载均衡</a>
            <dl class="layui-nav-child">
                <dd><a href="{% url 'service' %}" class="{% block nav-itemed-4-1 %}{% endblock %}">&nbsp;&nbsp;&nbsp;&nbsp;Service</a></dd>
                <dd><a href="{% url 'ingress' %}" class="{% block nav-itemed-4-2 %}{% endblock %}">&nbsp;&nbsp;&nbsp;&nbsp;Ingress</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item {% block nav-itemed-5 %}{% endblock %}">
            <a href="javascript:;"><i class="layui-icon layui-icon-template-1">&nbsp;&nbsp;</i>存储与配置</a>
            <dl class="layui-nav-child">
                <dd><a href="{% url 'configmap' %}" class="{% block nav-itemed-5-1 %}{% endblock %}">&nbsp;&nbsp;&nbsp;&nbsp;Configmap</a></dd>
                <dd><a href="{% url 'secret' %}" class="{% block nav-itemed-5-2 %}{% endblock %}">&nbsp;&nbsp;&nbsp;&nbsp;Secret</a></dd>
                <dd><a href="{% url 'pvc' %}" class="{% block nav-itemed-5-3 %}{% endblock %}">&nbsp;&nbsp;&nbsp;&nbsp;PVC</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>

  <div class="layui-body" style="background: #eeeeee">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        {% block context %}{% endblock %}
    </div>
  </div>

  <div class="layui-footer" style="text-align: center">
    <!-- 底部固定区域 -->
    个人博客：https://blog.csdn.net/liangpangpangyo
  </div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
//JS
layui.use(['form', 'layer', 'util'], function(){
   var form = layui.form
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.jquery;

  //头部事件
  util.event('lay-header-event', {
    //左侧菜单事件
    menuLeft: function(othis){
      layer.msg('展开左侧菜单的操作', {icon: 0});
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
        ,area: ['260px', '100%']
        ,offset: 'rt' //右上角
        ,anim: 5
        ,shadeClose: true
      });
    }
  });
  // 通过ajax(form)来请求后端接口，获取namespace
  $.ajax({
      type: "GET",
      async: "false", //设置同步
      url: {% url 'ns_api' %},
      success: function (res) {
          //console.log(res);
          if(res.code === 0){
              for(let index in res.data){
                  row = res.data[index];
                  //console.log(row);
                  $('#nsSelect').append('<option value=' + row.name + '>' + row.name + '</option>');
              }
              // 实现选择namespace时动态刷新页面资源
              // 使用浏览器本地存储来保存当前选择的namespace信息，当选择其他页面时查询存储来获取当前namespace
              ns_storage = window.sessionStorage; //键值对
              namespace = ns_storage.getItem('namespace');
              //console.log(namespace);
              // 首次访问 namespace 为空 ，则设置default为默认namespace
              if(namespace === null){
                  $("#nsSelect").find("option[value=default]").attr("selected", true);
                  ns_storage.setItem('namespace','default');
                  form.render("select");
              } else {
                  var ns_array = new Array();
                  for(let index in res.data){
                      row = res.data[index];
                      ns_array.push(row.name) //将所有的namespace放入ns_array数组
                  }
                  index = ns_array.indexOf(namespace); //查询数组中是否存在namespace
                  if(index === -1){
                      console.log("不存在");
                      cru_value = $("#nsSelect").val();
                      ns_storage.setItem('namespace',cru_value);
                  }
                  // 将session的namespace设置为选中状态
                  $("#nsSelect").find("option[value='"+ namespace +"']").attr("selected", true);
                  form.render('select');
                  // 如果 nsSelect 发生改变 则获取并存储到session
                  form.on('select(nsSelect)',function (data) {
                    var ns_current = data.value;
                    $("#nsSelect").find("option[value='"+ ns_current +"']").attr("selected", true);
                    ns_storage.setItem('namespace',ns_current);
                    form.render('select'); //使用form表单动态添加option 刷新表格
                    location.reload();  //选择namespace刷新页面
                  });
              }

          } else {
              layer.open({
                  type: 0,
                  title: "查询命名空间失败",
                  content: '<span style="color: red;font-size: 18px">' + res.msg + '</span>'
                  }
              )
          }
      },
      error: function () {
          layer.open({
              type: 0,
              title: "接口异常",
              content: "获取命名空间异常，请检查代码或K8s集群！"
          })
      }
  });

});
</script>
{% block custom_js %}{% endblock %}
</body>
</html>